<script setup lang="ts">
import {reactive} from "vue";
import Compost from "@/modal/Compost";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";

const compost: any = reactive(Compost.getInstance())
</script>

<template>
  <div class="compost container-fluid h-100">
    <div class="compost-title">
      <icon-font :icon-type="IconType.FERTILIZER"
                 :color="IconColor.COMPOST"
                 :is-desc="true"
                 font-size="x-large">
        <template #description>堆肥（骰子点数+/-1）</template>
      </icon-font>
    </div>
    <div class="compost-content">
      <div v-for="index in compost.capacity"
           :class="{active:index <= compost.currentBag}"
           class="compost-items"
      >
        <icon-font :icon-type="IconType.COMPOST"
                   :color="index <= compost.currentBag?IconColor.COMPOST:IconColor.DARK"
                   font-size="x-large"
        ></icon-font>
      </div>
    </div>
  </div>
</template>

<style scoped>
.compost-title {
  height: 30px;
}

.compost-content {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 30px);
  width: 100%;
  align-items: center;
}

.compost-content > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-right: calc(100% / 4 - 35px);
  box-sizing: border-box;
  border-radius: 50%;
}

.compost-content > div:nth-child(5n) {
  margin-right: 0;
}

.compost-items.active {
  background-color: rgb(128, 128, 128, .1);
}

</style>